<template>
    <div class="step-main">
        <div class="step-main-content">
            <div class="step-left" :style="{left: leftData + 'px'}">
                <div class="left-box">
                    <div class="set-box">
                        <div class="set-box-title">
                            <i class="iconfont icon-buzhoutiaozheng"></i>
                            案例步骤
                        </div>
                    </div>
                    <div class="step-left-content" :class="{ active: activeData}">
                        <div class="step-left-flow">
                            <div class="flow-item" v-for="(item, index) in dynamicValidateForm.domains" :class="{ active: editorOrAdd && stepActiveIndex == index}">
                                <span class="item-point"></span>
                                <span class="item-line" v-if="(dynamicValidateForm.domains.length-1) != index || !editorOrAdd"></span>
                            </div>
                        </div>
                        <div class="step-left-text">
                            <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
                                <el-form-item
                                    v-for="(domain, index) in dynamicValidateForm.domains"
                                    :key="domain.key"
                                    :prop="'domains.' + index + '.value'"
                                    :rules="{
                                    required: true, message: '标题不能为空', trigger: 'blur'
                                    }"
                                >
                                    <span :title="domain.value" v-if="editorOrAdd" :class="{ active: editorOrAdd && stepActiveIndex == index}">{{ domain.value }}</span>
                                    <el-input v-if="editorOrAdd == false" type="textarea" style="resize:none;" v-model="domain.value"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div class="arrow-btn" v-if="!tipsStatus" @click="arrowFn" :class="{ active: activeData}">
                        <img src="./../../assets/images/arrow_left_icon.png" />
                    </div>
                </div>
            </div>
            <div class="step-right">
                <div class="step-breadcrumb">
                    <i class="iconfont icon-anli"></i>
                    <span>{{ projectName }}</span>
                </div>
                <div class="step-right-tab">
                    <ul>
                        <li :class="{ active: leftContentTabActiveIndex == 1}" @click="letContentTab(1)">
                            <span>步骤</span>
                        </li>
                        <li :class="{ active: leftContentTabActiveIndex == 2}" @click="letContentTab(2)">
                            <span>数据源</span>
                        </li>
                        <li :class="{ active: leftContentTabActiveIndex == 3}" @click="letContentTab(3)">
                            <span>环境检查</span>
                        </li>
                    </ul>
                </div>
                <el-form v-show="leftContentTabActiveIndex == 1" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" style="margin-top:20px;">
                    <el-form-item v-show="!fangdaStatus">
                        <div class="step-right-form-title">
                            <i class="iconfont icon-mubiao1"></i>案例目标
                        </div>
                        <div class="step-right-form-text" v-if="ruleForm.projectTarget == ''">暂无目标</div>
                        <div class="step-right-form-text" v-else>{{ ruleForm.projectTarget }}</div>
                    </el-form-item>
                    <el-form-item v-show="!tipsStatus && !fangdaStatus">
                        <div class="step-right-form-title">
                            <i class="iconfont icon-xiangmumingcheng"></i>当前步骤
                        </div>
                        <span class="step-right-form-text">{{ ruleForm.stepValue }}</span>
                    </el-form-item>
                    <el-form-item v-show="!tipsStatus && !fangdaStatus">
                        <div class="step-right-form-title">
                            <i class="iconfont icon-shipin"></i>步骤视频
                        </div>
                        <div class="upload-text-box">
                            <div class="upload-text-tip"  v-if="ruleForm.uploadVideo == ''">暂无视频</div>
                            <div class="upload-text-tip"  v-else>{{ruleForm.uploadVideo}}</div>
                            <a v-if="ruleForm.uploadVideo != ''" :href="'/dataplatform/common/fileDownload?path='+encodeURIComponent(ruleForm.uploadVideo)">
                                <i class="iconfont icon-xiazai"></i>
                            </a>
                            <i v-if="ruleForm.uploadVideo != ''" class="iconfont icon-bofang" title="播放视频" @click="startVideo"></i>
                        </div>
                    </el-form-item>
                    <el-form-item v-show="!tipsStatus && !fangdaStatus">
                        <div class="step-right-form-title">
                            <i class="iconfont icon-shujuyuan"></i>步骤源码
                        </div>
                        <div class="upload-text-box">
                            <div class="upload-text-tip"  v-if="ruleForm.uploadFile == ''">暂无源码</div>
                            <div class="upload-text-tip"  v-else>{{ruleForm.uploadFile}}</div>
                            <a v-if="ruleForm.uploadFile != ''" :href="'/dataplatform/common/fileDownload?path='+encodeURIComponent(ruleForm.uploadFile)">
                                <i class="iconfont icon-xiazai"></i>
                            </a>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="!tipsStatus">
                        <div class="step-right-form-title">
                            <i class="iconfont icon-anli"></i>步骤说明
                            <div class="title-btn-box" @click="bigEditor">
                                <i class="iconfont icon-fangda" v-if="!fangdaStatus"></i>
                                <i class="iconfont icon-suoxiao1" v-else></i>
                            </div>
                        </div>
                        <div style="float: left; margin-left: 30px; font-size: 14px; color: #585858;" v-if="ruleForm.stepEtiorContent == ''">暂无步骤说明</div>
                        <div class="step-editor w-e-text" :style="stepEditorHeight" ></div>
                    </el-form-item>
                    <el-form-item class="save-position">
                        <el-button v-if="editorOrAdd && stepActiveIndex > 0" type="primary"  @click="pageFn(-1)">上一页</el-button>
                        <el-button v-if="editorOrAdd && dynamicValidateForm.domains.length>1 && dynamicValidateForm.domains.length != (stepActiveIndex+1)" type="primary"  @click="pageFn(1)">下一页</el-button>
                    </el-form-item>
                </el-form>
                <el-form v-show="leftContentTabActiveIndex == 2" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" style="margin-top:20px;">
                    <el-form-item>
                        <div class="step-right-form-title">
                            <i class="iconfont icon-dizhi"></i>数据采集信息
                        </div>
                        <div class="step-right-form-text" v-if="ruleForm.dataCollectAddress == null">暂无数据</div>
                        <div class="step-right-form-text" v-else v-for="item in ruleForm.dataCollectAddress">{{ item }}</div>
                    </el-form-item>
                    <el-form-item>
                        <div class="step-right-form-title">
                            <i class="iconfont icon-yuanshuju"></i>数据源说明
                        </div>
                        <div class="data-editor w-e-text" style="border:none;"></div>
                    </el-form-item>
                </el-form>
                <el-form v-show="leftContentTabActiveIndex == 3" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" style="margin-top:20px;">
                    <el-form-item>
                        <div class="environment-editor w-e-text" style="border:none;"></div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="step-main-mirror" style="background:#e2e2e2; width: 65%;">
            <div class="mirror-iframe" style="width:65%; height:100%; text-align:center; margin-top:22%; font-size:24px; color: #9e9e9e;">
                管理员未分配虚拟机
            </div>
            <div class="step-main-mirror-dialog" :style="{right: mirrorRightData + 'px'}">
                <div class="mirror-dialog-btn" style="top: 68px;">
                    <button @click="outFn">退出<i class="iconfont icon-tuichu"></i></button>
                </div>
            </div>
            <div class="step-main-mirror-arrow" :style="{right: mirrorArrowData + 'px'}" @click="mirrorArrowFn">
                <div :class="{active:mirrorActiveData}">工具栏</div>
            </div>
        </div>
        <el-dialog class="video-dialog" :visible.sync="videoDialogVisible" width="50%" @close="videoDialogClose">
            <video :src="ruleForm.videoUrl" controls="controls" name="media" width="100%"></video>
        </el-dialog>
    </div>
    </div>
</template>

<script>
    import vueWangeditor from '@/components/vueWangeditor.vue'
    export default {
        components: {
            vueWangeditor
        },
        data() {
            return {
                contentLoading: null,
                //項目ID
                projectId: '',
                //章节ID
                chapterId: '',
                //导航类型
                itemServiceType: '',
                //案例类型1预置2自定义区分是编辑或展示
                projectType: '',
                //项目名称
                projectName: '',
                //左侧菜单表单
                dynamicValidateForm: {
                    domains: [{
                        id: 0,
                        value: '',
                        size: 20
                    }]
                },
                editorOrAdd: false,
                activeData: true,
                leftData: -210,
                //桌面loading
                deskLoading: false,
                deskLoadingText: '桌面加載中',
                //左侧引导显示状态
                tipsStatus: '',
                //左侧step标记
                stepActiveIndex: 0,
                stepId: '',
                stepItemId: '',
                stepSaveId: '',
                //左侧内容tab标记
                leftContentTabActiveIndex: 1,
                //左侧内容未制作状态显示
                tipsStatus: '',
                //添加案例目标弹窗显示
                projectTargetVisible: false,
                editorContent: '',
                //左侧步骤说明放大缩小状态
                fangdaStatus: false,
                //左侧步骤编辑器宽高
                stepEditorHeight: {
                    borderTop: 'solid 1px #bfbfbf',
                    maxHeight: '220px'
                },
                //左侧表单form
                ruleForm: {
                    projectTarget: '',
                    stepValue: '',
                    uploadVideo: '',
                    videoUrl: '',
                    videoUrlText: '',
                    uploadFile: '',
                    stepEtiorContent: '',
                    dataEtiorContent: '',
                    environmentEtiorContent: '',
                    //数据采集信息
                    dataCollectAddress: ''
                },
                editorMenus: [          // 菜单配置
                    'bold',  // 粗体
                    'italic',  // 斜体
                    'link',  // 插入链接
                    'list',  // 列表
                    'quote',  // 引用
                    'image',  // 插入图片
                    'table',  // 表格
                ],
                //视频播放弹窗
                videoDialogVisible: false,
                mirrorRightData: 0,
                mirrorArrowData: 150,
                mirrorActiveData: true,
                //实验时长
                longTimewebsock: null,
                longTimeOver: null,
                //通知消息
                websock: null,
                over: null
            }
        },
        created () {
            //章节ID
            this.chapterId = this.$store.state.chapterType
            //項目ID
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            //导航类型
            this.itemServiceType = this.$store.state.itemServiceType
            //案例类型1预置2自定义
            this.projectType = JSON.parse(window.localStorage.getItem('teacher-project-id')).type

            this.init()   //页面初始化
            this.$nextTick(function () {
                this.iframeHeight = $('body').height()
            })
        },
        methods: {
            //页面初始化
            init(){
                let self = this
                self.$http.get('/dataplatform/chapter/step/chapterStepData?chapterId='+self.chapterId+'&itemServiceType='+self.itemServiceType).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.vmButton = res.data.vmButton
                        self.tipsStatus = true
                        self.editorOrAdd = false
                        self.ruleForm.projectTarget = res.data.chapterVO.target
                        self.projectName = res.data.itemName
                        if(res.data.stepList.list.length > 0){
                            self.stepId = res.data.stepList.list[0].id
                            self.stepSaveId = res.data.stepList.list[0].id
                            self.ruleForm.stepValue = res.data.stepList.list[0].name
                            self.editorOrAdd = true
                            self.stepActiveIndex = 0
                            self.tipsStatus = false
                            self.dynamicValidateForm.domains = []
                            for (let i = 0; i < res.data.stepList.list.length; i++) {
                                let listJson = {}
                                listJson.id = res.data.stepList.list[i].id
                                listJson.value = res.data.stepList.list[i].name
                                listJson.size = 20 - res.data.stepList.list[i].name.length
                                self.dynamicValidateForm.domains.push(listJson)
                            }
                            self.editorInit()   //編輯器初始化
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //初始化编辑数据
            editorInit(){
                let self = this
                let stepId
                if(self.leftContentTabActiveIndex == 1){
                    stepId = self.stepSaveId
                }else if(self.leftContentTabActiveIndex == 2 || self.leftContentTabActiveIndex == 3){
                    stepId = 0
                }
                self.$http.get('/dataplatform/chapter/step/getItemExtendInfo?chapterId='+self.chapterId+'&stepType='+self.leftContentTabActiveIndex+'&itemServiceType='+self.itemServiceType+'&stepId='+stepId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(self.leftContentTabActiveIndex == 1){
                            if(res.data.codeName != null){
                                self.ruleForm.uploadFile = res.data.codeName
                            }
                            if(res.data.videoName != null){
                                self.ruleForm.uploadVideo = res.data.videoName
                                self.ruleForm.videoUrl = res.data.videoUrl
                                self.ruleForm.videoUrlText = res.data.videoUrl
                            }
                            self.ruleForm.stepEtiorContent = res.data.instructions
                            if(self.projectType == 1){
                                $('.step-editor').html(res.data.instructions)
                            }
                            this.$nextTick(()=>{
                                if (self.ruleForm.stepEtiorContent == '') {
                                    $('.step-editor').css('display','none')
                                }
                            })
                        }else if(self.leftContentTabActiveIndex == 2){
                            self.ruleForm.dataCollectAddress = res.data.dataCollectAddress
                            self.ruleForm.dataEtiorContent = res.data.data
                            if(self.projectType == 1){
                                $('.data-editor').html(res.data.data)
                            }
                        }else if(self.leftContentTabActiveIndex == 3){
                            self.ruleForm.environmentEtiorContent = res.data.data
                            if(self.projectType == 1){
                                $('.environment-editor').html(res.data.data)
                            }

                        }
                        if(self.contentLoading != null){
                            self.contentLoading.close()
                        }
                    }else if(res.code == '401'){
                        if(self.contentLoading != null){
                            self.contentLoading.close()
                        }
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        if(self.contentLoading != null){
                            self.contentLoading.close()
                        }
                        self.$message.error(res.message)
                    }
                })
            },
            stepCatchData (value){
                this.ruleForm.stepEtiorContent = value      //在这里接受子组件传过来的参数，赋值给data里的参数
            },
            dataCatchData (value){
                this.ruleForm.dataEtiorContent = value      //在这里接受子组件传过来的参数，赋值给data里的参数
            },
            environmentCatchData (value){
                this.ruleForm.environmentEtiorContent = value      //在这里接受子组件传过来的参数，赋值给data里的参数
            },
            //左侧菜单设置步骤
            settingFn(){
                for(let i = 0; i < this.dynamicValidateForm.domains.length; i++){
                    if(this.dynamicValidateForm.domains[i].value == ''){
                        this.$message.error('请填写步骤')
                        return;
                    }
                }
                if(this.editorOrAdd == false){
                    this.editorOrAdd = true
                }else{
                    this.editorOrAdd = false
                }
            },
            //流程字数限制
            flowInput(item){
                var index = this.dynamicValidateForm.domains.indexOf(item)
                var txtVal = this.dynamicValidateForm.domains[index].value.length;
                this.dynamicValidateForm.domains[index].size = 20 - txtVal
            },
            //左侧菜单动画
            arrowFn() {
                if(this.leftData == -210){
                    this.leftData = 0
                    this.activeData = false
                }else{
                    this.leftData = -210
                    this.activeData = true
                }
            },
            //左侧内容tab切换
            letContentTab(value){
                this.leftContentTabActiveIndex = value
                this.contentLoading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                this.editorInit()
            },
            //步驟翻页
            pageFn(page){
                let self = this
                if(page == 1){
                    if(self.stepActiveIndex == (self.dynamicValidateForm.domains.length - 1)){
                        self.stepActiveIndex = 0
                        self.stepId = self.dynamicValidateForm.domains[self.dynamicValidateForm.domains.length - 1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[0].id
                        self.ruleForm.stepValue =self.dynamicValidateForm.domains[0].value
                    }else{
                        self.stepActiveIndex = self.stepActiveIndex+1
                        self.stepId = self.dynamicValidateForm.domains[self.stepActiveIndex - 1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[self.stepActiveIndex].id
                        self.ruleForm.stepValue = self.dynamicValidateForm.domains[self.stepActiveIndex].value
                    }
                }else if(page == -1){
                    if(self.stepActiveIndex - 1 == 0){
                        self.stepActiveIndex = 0
                        self.stepId = self.dynamicValidateForm.domains[1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[0].id
                        self.ruleForm.stepValue = self.dynamicValidateForm.domains[0].value
                    }else{
                        self.stepActiveIndex = self.stepActiveIndex - 1
                        self.stepId = self.dynamicValidateForm.domains[self.stepActiveIndex+1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[self.stepActiveIndex].id
                        self.ruleForm.stepValue = self.dynamicValidateForm.domains[self.stepActiveIndex].value
                    }

                }
                self.$http.post('/dataplatform/chapter/step/updateAndGetStep',{
                    tabType: page,
                    id: self.stepId,
                    itemServiceType: self.itemServiceType,
                    instructions: self.ruleForm.stepEtiorContent
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.ruleForm.stepEtiorContent = res.data.instructions
                        self.ruleForm.uploadFile = res.data.codeName == null ? '' : res.data.codeName
                        self.ruleForm.uploadVideo = res.data.videoName == null ? '' : res.data.videoName

                        self.ruleForm.videoUrl = res.data.videoUrl == null ? '' : res.data.videoUrl
                        self.ruleForm.videoUrlText = res.data.videoUrl == null ? '' : res.data.videoUrl

                        if(self.projectType == 1){
                            $('.step-editor').html(res.data.instructions)
                        }
                        self.$nextTick(()=>{
                            if (self.ruleForm.stepEtiorContent == '') {
                                $('.step-editor').css('display','none')
                            }else{
                                $('.step-editor').css('display','block')
                            }
                        })
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //添加内容type==1添加type==2编辑
            addProjectContent(type){
                if(type == 1){
                    this.addTargetTitle = '添加案例目标'
                    this.addTargetType = 1
                    this.addTargetValue = ''
                    this.addTargetNumber = 500
                }else{
                    this.addTargetTitle = '编辑案例目标'
                    this.addTargetType = 2
                    this.addTargetValue = this.ruleForm.projectTarget
                    this.addTargetNumber = 500 - this.ruleForm.projectTarget.length
                }
                this.projectTargetVisible = true
            },
            addTargetInput(){
                var txtVal = this.addTargetValue.length;
                this.addTargetNumber = 500 - txtVal
            },
            videoDialogClose(){
                this.ruleForm.videoUrl = ''
            },
            //播放视频
            startVideo(){
                this.ruleForm.videoUrl = this.ruleForm.videoUrlText
                this.videoDialogVisible = true
            },
            //案例目标保存
            addTargetSave(){
                let self = this
                self.$http.post('/dataplatform/chapter/updateTarget',{
                    itemId: self.projectId,
                    target: self.addTargetValue
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(this.addTargetType == 1){
                            self.$message({
                                message: '保存',
                                type: 'success'
                            })
                        }else if(this.addTargetType == 2){
                            self.$message({
                                message: '编辑成功',
                                type: 'success'
                            })
                        }
                        self.init()
                        self.projectTargetVisible = false
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //放大缩小editor
            bigEditor(){
                if(this.fangdaStatus == true){
                    this.fangdaStatus = false
                    $('#step-editor-editor').css('height','220px')
                    if(this.projectType == 1){
                        this.stepEditorHeight.border = 'solid 1px #bfbfbf'
                        this.stepEditorHeight.maxHeight = '220px'
                    }
                }else{
                    this.fangdaStatus = true
                    $('#step-editor-editor').css('height','800px')
                    if(this.projectType == 1){
                        this.stepEditorHeight.border = 'none'
                        this.stepEditorHeight.maxHeight = ''
                    }
                }
            },
            //步骤说明保存
            submitForm() {
                let self = this
                self.stepItemId = self.dynamicValidateForm.domains[self.stepActiveIndex].id
                self.$http.post('/dataplatform/chapter/step/updateAndGetStep',{
                    tabType: 0,
                    id: self.stepSaveId,
                    itemServiceType: 2,
                    instructions: self.ruleForm.stepEtiorContent
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        // self.saveSuccessStatus = true
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //数据源环境检查保存
            saveData(){
                let self = this
                let content
                if(self.leftContentTabActiveIndex == 2){
                    content = self.ruleForm.dataEtiorContent
                }else if(self.leftContentTabActiveIndex == 3){
                    content = self.ruleForm.environmentEtiorContent
                }
                self.$http.post('/dataplatform/chapter/step/updateItemExtendInfo',{
                    chapterId: self.chapterId,
                    stepType: self.leftContentTabActiveIndex,
                    content: content
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //右侧菜单动画
            mirrorArrowFn(){
                if(this.mirrorRightData == -150){
                    this.mirrorRightData = 0
                    this.mirrorArrowData = 150
                    this.mirrorActiveData = true
                }else{
                    this.mirrorRightData = -150
                    this.mirrorArrowData = 0
                    this.mirrorActiveData = false
                }
            },
            //退出
            outFn(){
                this.$router.push({
                    path: '/admin/presetItems'
                })
            }
        }
    }
</script>

